<template>
    <div id="cart">
        <nav-bar class="nav-bar">
            <div slot="center">购物车({{count}})</div>
        </nav-bar>
        <cart-list/>
        <cart-bottom-bar/>
    </div>
</template>

<script>
    import NavBar from 'common/navbar/Navbar'
    import CartList from './childComps/CartList'
    import CartBottomBar from './childComps/CartBottomBar'

    import {mapGetters} from 'vuex'

    export default {
        name: "Cart",
        components: {
            NavBar,
            CartList,
            CartBottomBar
        },
        computed: {
            ...mapGetters([
                'count'
            ])

            //可以起别名
            // ...mapGetters({
            //   length: 'count'
            // })
        }
    }
</script>

<style scoped>
    #cart{
        height: 100vh;
    }
    .nav-bar {
        background-color: var(--color-tint);
        color: #fff;
    }
</style>